aboutsummaryrefslogtreecommitdiff
path: root/src/routes/grocery/[id]
diff options
context:
space:
mode:
Diffstat (limited to 'src/routes/grocery/[id]')
-rw-r--r--src/routes/grocery/[id]/+page.server.ts58
-rw-r--r--src/routes/grocery/[id]/+page.svelte170
2 files changed, 62 insertions, 166 deletions
diff --git a/src/routes/grocery/[id]/+page.server.ts b/src/routes/grocery/[id]/+page.server.ts
index b19825a..3c3967a 100644
--- a/src/routes/grocery/[id]/+page.server.ts
+++ b/src/routes/grocery/[id]/+page.server.ts
@@ -1,11 +1,28 @@
import { error, fail, redirect } from '@sveltejs/kit';
import { db } from '$lib/server/db';
-import { groceries, categories, references } from '$lib/server/db/schema';
+import { groceries, categories } from '$lib/server/db/schema';
import { eq } from 'drizzle-orm';
+import {
+ loadForGrocery,
+ add as addRef,
+ deleteReference,
+} from '$lib/server/services/references';
+import { deleteGrocery } from '$lib/server/services/groceries';
+import {
+ numericId,
+ parseFormString,
+ parseOptionalNumber,
+} from '$lib/server/services/validation';
+import type { Grocery, Reference } from '$lib/server/services/types';
import type { Actions, PageServerLoad } from './$types';
+export interface GroceryDetailOutput {
+ item: Grocery & { categoryName: string | null };
+ references: Reference[];
+}
+
export const load: PageServerLoad = async ({ params }) => {
- const id = Number(params.id);
+ const id = numericId(params.id);
const [item] = await db.select().from(groceries).where(eq(groceries.id, id));
if (!item) throw error(404, 'Article introuvable');
@@ -17,10 +34,7 @@ export const load: PageServerLoad = async ({ params }) => {
.where(eq(categories.id, item.categoryId))
: [null];
- const refs = await db
- .select()
- .from(references)
- .where(eq(references.groceryId, id));
+ const refs = await loadForGrocery(id);
return {
item: {
@@ -34,38 +48,34 @@ export const load: PageServerLoad = async ({ params }) => {
export const actions: Actions = {
add: async ({ request, params }) => {
const data = await request.formData();
- const reference = data.get('reference')?.toString().trim();
- const price = data.get('price')?.toString().trim();
- const unit = data.get('unit')?.toString().trim();
- const qualityScore = data.get('quality_score')?.toString().trim();
+ const groceryId = numericId(params.id);
+ const reference = parseFormString(data.get('reference'));
+ const price = parseOptionalNumber(data.get('price'));
+ const unit = parseFormString(data.get('unit'));
+ const qualityScore = parseOptionalNumber(data.get('quality_score'));
if (!reference) {
return fail(400, { error: 'La référence est requise' });
}
- await db.insert(references).values({
- groceryId: Number(params.id),
- reference,
- price: price ? Number(price) : null,
- unit: unit || null,
- qualityScore: qualityScore ? Number(qualityScore) : null,
- });
-
+ await addRef(groceryId, reference, price, unit, qualityScore);
return { success: true };
},
delete: async ({ request }) => {
const data = await request.formData();
- const id = Number(data.get('id'));
-
- await db.delete(references).where(eq(references.id, id));
-
+ try {
+ const id = numericId(data.get('id'));
+ await deleteReference(id);
+ } catch {
+ return fail(400, { error: 'ID invalide' });
+ }
return { success: true };
},
deleteItem: async ({ params }) => {
- await db.delete(groceries).where(eq(groceries.id, Number(params.id)));
-
+ const groceryId = numericId(params.id);
+ await deleteGrocery(groceryId);
throw redirect(303, '/');
},
};
diff --git a/src/routes/grocery/[id]/+page.svelte b/src/routes/grocery/[id]/+page.svelte
index c3c3706..a49d037 100644
--- a/src/routes/grocery/[id]/+page.svelte
+++ b/src/routes/grocery/[id]/+page.svelte
@@ -1,7 +1,5 @@
<script lang="ts">
- import '../../../app.css';
import { enhance } from '$app/forms';
- import { page } from '$app/stores';
let { data, form } = $props();
let reference = $state('');
@@ -20,10 +18,11 @@
<h2>Références</h2>
-<form class="add-form" method="POST" action="?/add" use:enhance>
+<form class="form-card" method="POST" action="?/add" use:enhance>
<label>
- <span class="label">Référence</span>
+ <span class="form-label">Référence</span>
<input
+ class="form-input"
type="text"
name="reference"
bind:value={reference}
@@ -33,8 +32,9 @@
</label>
<div class="ref-row">
<label>
- <span class="label">Prix</span>
+ <span class="form-label">Prix</span>
<input
+ class="form-input"
type="number"
name="price"
bind:value={price}
@@ -43,16 +43,17 @@
/>
</label>
<label>
- <span class="label">Unité</span>
- <select name="unit" bind:value={unit}>
+ <span class="form-label">Unité</span>
+ <select class="form-select" name="unit" bind:value={unit}>
<option value="€/kg">€/kg</option>
<option value="€/L">€/L</option>
<option value="€/u">€/u</option>
</select>
</label>
<label>
- <span class="label">Note</span>
+ <span class="form-label">Note</span>
<input
+ class="form-input"
type="number"
name="quality_score"
bind:value={qualityScore}
@@ -62,7 +63,7 @@
/>
</label>
</div>
- <button type="submit">Ajouter une référence</button>
+ <button class="btn-primary" type="submit">Ajouter une référence</button>
</form>
{#if form?.error}
@@ -70,9 +71,9 @@
{/if}
<form method="POST" action="?/delete" use:enhance>
- <ul class="item-list">
+ <ul class="item-list item-list--wide">
{#each data?.references ?? [] as ref (ref.id)}
- <li class="ref-item">
+ <li class="item-row item-row--ref">
<div class="ref-info">
<strong>{ref.reference}</strong>
{#if ref.price}
@@ -84,7 +85,13 @@
<span class="ref-detail">Note : {ref.qualityScore}/100</span>
{/if}
</div>
- <button class="delete-btn" name="id" value={ref.id} type="submit">
+ <button
+ class="btn-ghost"
+ name="id"
+ value={ref.id}
+ type="submit"
+ aria-label="Supprimer"
+ >
&times;
</button>
</li>
@@ -110,51 +117,6 @@
margin-top: 0.25rem;
}
- .add-form {
- display: flex;
- flex-direction: column;
- gap: 0.75rem;
- margin-bottom: 1.5rem;
- margin-top: 0.75rem;
- padding: 1rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .add-form label {
- display: flex;
- flex-direction: column;
- gap: 0.375rem;
- }
-
- .label {
- font-size: 0.75rem;
- font-weight: 700;
- text-transform: uppercase;
- letter-spacing: 0.06em;
- color: var(--text-secondary);
- }
-
- input,
- select {
- padding: 0.75rem 1rem;
- border: 1.5px solid var(--border);
- border-radius: 0.75rem;
- font-size: 1rem;
- font-family: inherit;
- background: var(--bg);
- transition: border-color 0.2s, box-shadow 0.2s;
- min-width: 0;
- }
-
- input:focus,
- select:focus {
- outline: none;
- border-color: var(--accent);
- box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.15);
- }
-
.ref-row {
display: flex;
gap: 0.75rem;
@@ -166,65 +128,6 @@
min-width: 6rem;
}
- .add-form button[type='submit'] {
- padding: 0.75rem 1.5rem;
- border: none;
- border-radius: 0.75rem;
- background: var(--accent);
- color: #fff;
- font-size: 0.9375rem;
- font-weight: 500;
- align-self: flex-start;
- cursor: pointer;
- transition: all 0.2s ease;
- box-shadow: 0 1px 2px var(--shadow);
- }
-
- .add-form button[type='submit']:hover {
- background: var(--accent-hover);
- transform: translateY(-1px);
- box-shadow: 0 4px 8px rgba(217, 119, 87, 0.2);
- }
-
- .error {
- color: var(--danger);
- font-size: 0.875rem;
- margin-top: -0.25rem;
- margin-bottom: 0.5rem;
- padding: 0.5rem 0.75rem;
- background: rgba(217, 83, 79, 0.08);
- border-radius: 0.5rem;
- }
-
- hr {
- border: none;
- border-top: 1.5px solid var(--border);
- margin: 1.5rem 0;
- }
-
- .item-list {
- list-style: none;
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- }
-
- .ref-item {
- display: flex;
- align-items: center;
- gap: 0.75rem;
- padding: 0.875rem 1rem;
- border-radius: 0.75rem;
- background: var(--surface);
- box-shadow: 0 1px 2px var(--shadow);
- transition: all 0.2s ease;
- }
-
- .ref-item:hover {
- box-shadow: 0 2px 6px var(--shadow);
- transform: translateY(-1px);
- }
-
.ref-info {
flex-grow: 1;
display: flex;
@@ -242,37 +145,20 @@
border-radius: 0.375rem;
}
- .delete-btn {
- flex-shrink: 0;
- width: 2rem;
- aspect-ratio: 1;
- padding: 0;
- border: none;
- border-radius: 0.625rem;
- background: transparent;
- color: var(--text-secondary);
- font-size: 1.25rem;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .delete-btn:hover {
- background: rgba(217, 83, 79, 0.1);
- color: var(--danger);
+ .error {
+ margin-top: -0.25rem;
+ margin-bottom: 0.5rem;
}
.empty {
- color: var(--text-secondary);
- font-size: 0.9375rem;
margin-top: 0.75rem;
- text-align: center;
padding: 1.5rem;
- background: var(--surface);
- border-radius: 0.75rem;
- box-shadow: 0 1px 2px var(--shadow);
+ }
+
+ hr {
+ border: none;
+ border-top: 1.5px solid var(--border);
+ margin: 1.5rem 0;
}
.back-link {
generated by cgit v1.3 (git 2.53.0) at 2026-10-18 22:12:53 +0000